<template>
  <div>
    <a-row>
      <a-form-model layout="inline" :model="posLatLon">
        <a-form-model-item>
          <a-input v-model="posLatLon.lat" type="number" placeholder="经度" />
        </a-form-model-item>
        <a-form-model-item>
          <a-input v-model="posLatLon.lon" type="number" placeholder="纬度" />
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="posTrans"> 确定 </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-row>
    <div id="map-pos-select" style="height: 460px; width: 100%"></div>
    <a-row>
      <a-col :span="4" :offset="8">
        <a-button type="primary" @click="handleOk"> 确认 </a-button>
      </a-col>
      <a-col :span="4">
        <a-button @click="$emit('cancle')"> 取消 </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
const { fromLonLat, toLonLat } = ol.proj;
import { PointSelect } from "@/utils/olInteraction";
let mapForSelect = null;
export default {
  data() {
    return {
      pointFeature: "",
      projection: null,
      posLatLon: {
        lat: 114.3,
        lon: 30.6,
      },
    };
  },
  props: {
    position: Array,
    proj: {
      type: String,
      default: "EPSG:3857",
    },
  },
  model: {
    prop: "position",
    event: "change",
  },
  methods: {
    posTrans() {
      this.pointFeature.setCoordinates(
        fromLonLat([this.posLatLon.lat, this.posLatLon.lon])
      );
      mapForSelect.setView(
        new ol.View({
          center: fromLonLat([this.posLatLon.lat, this.posLatLon.lon]),
          zoom: 10,
        })
      );
    },
    init() {
      //   console.log("aa");
      this.projection = ol.proj.get(this.proj);
      var AMapLayer = new ol.layer.Tile({
        // source: new ol.source.XYZ({
        //   url:
        //     "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
        // }),
        source: new ol.source.XYZ({
          url:
            "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
          crossOrigin: "anonymous",
        }),
      });

      mapForSelect = new ol.Map({
        interactions: ol.interaction
          .defaults()
          .extend([new PointSelect(this.pointFeature)]),
        layers: [
          AMapLayer,
          new ol.layer.Vector({
            source: new ol.source.Vector({
              features: [new ol.Feature(this.pointFeature)],
            }),
            style: new ol.style.Style({
              image: new ol.style.Icon({
                anchor: [0.5, 0.5],
                anchorXUnits: "fraction",
                anchorYUnits: "fraction",
                opacity: 0.95,
                scale: 0.6,
                src: require("@/assets/poi.png"),
              }),
            }),
          }),
        ],
        target: "map-pos-select",
        view: new ol.View({
          center: fromLonLat([this.posLatLon.lat, this.posLatLon.lon]),
          zoom: 10,
        }),
      });

      //   console.log(mapForSelect);
    },
    handleOk() {
      let f = new ol.format.GeoJSON().writeGeometryObject(this.pointFeature, {
        dataProjection: this.projection,
      });
      let coors = f.coordinates;
      f.coordinates = toLonLat(coors, this.projection);
      this.posLatLon.lat = f.coordinates[0];
      this.posLatLon.lon = f.coordinates[1];
      this.$emit("change", f.coordinates);
    },
  },
  mounted() {
    if (this.position) {
      this.posLatLon.lat = this.position[0];
      this.posLatLon.lon = this.position[1];
      //   g.coordinates = fromLonLat(g.coordinates);
      this.pointFeature = new ol.geom.Point(
        fromLonLat([this.posLatLon.lat, this.posLatLon.lon])
      );
    } else {
      this.pointFeature = new ol.geom.Point(
        fromLonLat([this.posLatLon.lat, this.posLatLon.lon])
      );
    }
    this.init();
  },
};
</script>

<style>
</style>